.z-drag {
  --z-drag-top: 0px;
  --z-drag-left: 0px;
  --z-drag-scale: 1;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  user-select: none;
  background-color: var(--z-fill-color-blank);
  &.is-fixed {
    inset: 0;
    position: fixed;
    z-index: var(--z-drag-zindex);
  }

  &__wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }

  &__move {
    top: var(--z-drag-top);
    left: var(--z-drag-left);
    position: absolute;
    transform: scale(var(--z-drag-scale, 1));
  }

  &--bg {
    display: block;
  }

  &--content {
    inset: 0;
    position: absolute;
  }

  &__operate {
    top: 24px;
    left: 16px;
    width: 40px;
    position: absolute;
    text-align: center;
    &-wrap {
      margin-top: 12px;
    }
  }

  &--button {
    $size: 40px;
    width: $size;
    height: $size;
    color: var(--z-text-color);
    cursor: pointer;
    display: flex;
    font-size: 20px;
    box-shadow: 0px 2px 6px 0px #d8dfe5;
    align-items: center;
    border-radius: 50%;
    background-color: var(--z-fill-color-blank);
    justify-content: center;
    &:hover {
      opacity: 0.85;
    }
    &:active {
      opacity: 0.7;
    }
    & + & {
      margin-top: 12px;
    }
    &-toggle {
      color: var(--z-text-color-white);
      background-color: var(--z-main-color);
    }
  }
}
